<!--商品列表-->
<template>
  <div class="container-fuild product">
    <div class="product-frame">
      <div
        class="product-panel"
        v-for="(item, index) in productList"
        :key="'pro' + index"
      >
        <div class="product-fast">
          <div class="product-img">
            <nuxt-link
              :to="
                '/product/' +
                item.id +
                '/' +
                tool.urlCheckForMenuTitle(item.title)
              "
              class="product-fast"
            >
              <van-image class="img" fit="cover" lazy-load :src="item.pic" />
              <van-image
                v-show="item.status == '0'"
                class="img"
                fit="cover"
                lazy-load
                :src="item.pic"
              />
            </nuxt-link>
            <div
              class="icon-panel icon ac-bg"
              @click.stop="clickCollection(item, index)"
            >
              <van-icon
                class="co-icon"
                :name="collection ? 'like' : 'like-o'"
                size="0.8rem"
              />
            </div>
            <div class="discount-frame" v-if="item.prop_suks != undefined">
              <div
                class="discount-panel"
                v-if="
                  item.prop_suks.length > 0 &&
                  item.price != item.prop_suks[0].discount_price
                "
              >
                <p class="discount-label">-</p>
                <p class="discount">
                  {{
                    (10 - parseFloat(item.prop_suks[0].discount)).toFixed(2) *
                    10
                  }}%
                </p>
              </div>
            </div>
          </div>
          <div class="product-main" @click="clickPro(item)">
            <p class="product-title co-light">
              {{ item.title }}
            </p>
            <p class="product-price" v-if="item.prop_suks">
              <span
                style="color: red; margin-right: 0.5rem; font-size: 0.5rem"
                v-if="
                  item.prop_suks.length > 0 &&
                  item.price != item.prop_suks[0].discount_price
                "
                >$ {{ item.prop_suks[0].discount_price }}</span
              >
              <span
                v-if="
                  item.prop_suks.length > 0 &&
                  item.price != item.prop_suks[0].discount_price
                "
                style="
                  text-decoration: line-through !important;
                  color: #676766 !important;
                  font-size: 0.3rem !important;
                "
                >$ {{ item.price }}</span
              >
              <span
                v-else-if="item.prop_suks.length > 0"
                style="font-size: 0.5rem"
                >$ {{ item.price }}</span
              >
            </p>
            <p class="product-price" v-else>
              {{ item.price }}
            </p>
            <van-rate
              color="#ffd21e"
              size="0.7rem"
              :value="parseFloat(item.stars)"
              readonly
            />
          </div>
          <div class="btn-frame" @click="clickPro(item)">
            <div class="btn-panel">ADD TO BAG</div>
          </div>
        </div>
      </div>
    </div>
    <Loading v-show="loading" />
    <Nodata v-show="productList.length == 0 && !loading" />
    <van-pagination
      v-model="page"
      :total-items="total"
      :items-per-page="pageSize"
      :show-page-size="5"
      class="col-sm-12 col-md-8 col-lg-6 col-xl-4"
      v-if="total > pageSize && !loading"
      @change="pageChange"
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>
  </div>
</template>
<script>
import tool from "@/common/tool.js";
export default {
  name: "ProduList",
  data() {
    return {
      tool,
    };
  },
  props: {
    productList: {
      type: Array,
      default() {
        return [];
      },
    },
    total: {
      type: Number,
      default: 0,
    },
    page: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 20,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    collection: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    //鼠标经过
    proOver(item, index) {
      console.log(item);
      this.productList[index].status = "hover";
      // if (item.imgs.length > 1) {
      //   this.$nextTick(() => {
      //     setTimeout(() => {
      //       this.productList[index].pic = item.imgs[1];
      //     }, 100);
      //   });
      // }
    },
    //鼠标移除
    proOut(item, index) {
      if (item.imgs.length > 1) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.productList[index].pic = item.imgs[0];
          }, 1000);
        });
      }
    },
    //点击商品
    clickPro(item) {
      this.$router.push(
        "/product/" + item.id + "/" + tool.urlCheckForMenuTitle(item.title)
      );
    },
    //切换页码
    pageChange(page) {
      this.$emit("pageChange", page);
    },
    clickCollection(item, index) {
      if (this.collection) {
        this.$emit("clickCollection", item, index);
      } else {
        this.clickPro(item);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.product {
  width: 100%;
  clear: both;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 2rem;
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  .product-frame {
    width: 100%;
    clear: both;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .product-panel {
    min-width: 25%;
    width: 210px;
    max-width: 50%;
    clear: both;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0.6rem;
    padding: 0 0.3rem;
    .product-fast {
      width: 100%;
      clear: both;
      background: #fff;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      cursor: pointer;
    }

    .product-img {
      width: 80%;
      padding: 112% 0 0;
      position: relative;

      .img {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .icon {
        position: absolute;
        top: 0.1rem;
        right: 0.1rem;
        clear: both;
        color: #8c8c8c;
      }
      .discount-frame {
        position: absolute;
        top: 0.5rem;
        left: 0;
        clear: both;
        .discount-panel {
          height: 1rem;
          clear: both;
          background: #e38cff;
          border-radius: 0 2rem 2rem 0;
          color: #fff;
          font-size: 0.6rem;
          padding: 0 0.25rem;
          line-height: 1rem;
          display: flex;
          font-family: "Helvetica";
          align-items: center;
          background: #e38cff;
        }
        .discount-label {
          margin-top: -0.08rem;
        }
        .discount {
          margin-left: 0.2rem;
        }
      }
    }

    .product-main {
      width: 80%;
      clear: both;
      text-align: center;
      .product-title {
        width: 100%;
        min-height: 1.2rem;
        clear: both;
        margin-top: 0.3rem;
        margin-bottom: 0px;
        font-size: 0.5rem;
        line-height: 0.6rem;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        font-family: "BTBlack";
        color: #000;
      }

      .product-price {
        width: 100%;
        clear: both;
        font-size: 0.4rem;
        font-size: 0.4rem;
        margin-bottom: 0;
        font-weight: bold;
        color: #000;
      }
    }
    .btn-frame {
      width: 100%;
      height: 1.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0.5rem;
      .btn-panel {
        min-width: 50%;
        width: 6rem;
        max-width: 100%;
        min-height: 1.2rem;
        padding: 0.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.5rem;
        border: 1px solid #969799;
        color: #000;
        font-family: "BTBlack";
      }
    }
  }
}
</style>